import React from 'react'
import { List, InputItem, WingBlank, WhiteSpace, Button, Radio } from 'antd-mobile'
import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import Logo from '../../component/logo/logo'
import { register } from '../../redux/user.redux'
import formWrapper from '../../component/form-wrapper/form-wrapper'


@connect(
    state => state.user,
    { register }
)
@formWrapper
export default class Register extends React.Component {
    constructor(props) {
        super(props);       
        this.handleRegister = this.handleRegister.bind(this);
    }

    handleRegister() {
        this.props.register(this.props.state)
    }

    render() {
        const RadioItem = Radio.RadioItem
        return (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo} /> : null}
                <Logo></Logo>                
                <WingBlank>
                    <List>
                        {this.props.msg ? <p className='err-msg' >{this.props.msg}</p> : ''}
                        <InputItem onChange={v => this.props.handleChange('user', v)} >用户名</InputItem>
                        <InputItem type="password"
                            onChange={v => this.props.handleChange('pwd', v)} >密码</InputItem>
                        <InputItem type="password"
                            onChange={v => this.props.handleChange('repwd', v)} >确认密码</InputItem>
                        <RadioItem
                            checked={this.props.state.type === 'genius'}
                            onChange={() => this.props.handleChange('type', 'genius')}
                        >牛人</RadioItem>
                        <RadioItem
                            checked={this.props.state.type === 'boss'}
                            onChange={() => this.props.handleChange('type', 'boss')}
                        >boss</RadioItem>
                        <WhiteSpace></WhiteSpace>
                        <Button type="primary" onClick={this.handleRegister} >注册</Button>
                    </List>

                </WingBlank>
            </div>
        )
    }
}